<div class="well table-search">
    <form class="form-horizontal">
        <div class="form-group col-sm-4">
            <label class="col-sm-2 control-label"> 名称 </label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="key" />
            </div>
        </div>
        <div class="form-group col-sm-4">
            <label class="col-sm-2 control-label"> 状态 </label>
            <div class="col-sm-10">
                <select id="status" class="form-control">
                    <option value="">--不限--</option>
                    <option value="1">启用</option>
                    <option value="2">禁用</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <button class="btn btn-success btn-sm" onclick="refreshTable()"><i class="fa fa-search"></i> 搜索</button>
            <button class="btn btn-sm"><i class="fa fa-undo"></i> 重置</button>
        </div>
    </form>
</div>
<div id="toolbar">
    <a class="btn btn-info btn-white item-form-modal"><i class="ace-icon fa fa-plus"></i> 新增</a>
</div>
<table id="list-container"></table>
<?php $this->beginBlock('js') ?>
<script type="text/javascript">
    var urls = {
        index: 'index',
        disable: 'disable',
        enable: 'enable',
        add: 'add',
        edit: 'edit',
    }
    var tableContainer = $('#list-container')
    var tableSearchForm = '.table-search form'
    initTable()
    function refreshTable() {
        tableContainer.bootstrapTable('refresh', {
            query: ace.form.serialize(tableSearchForm)
        });
    }
    function initTable () {
        tableContainer.bootstrapTable('destroy');
        var columns = [
            {title: 'ID', field: 'id'},
            {title: '名称', field: 'name'},
            {title: '联系人', field: 'contact', editable: {
                type: 'text',
                validate: function (v) {
                    if(v.length<1) return '请输入正确联系人';
                }
            }},
            {title: '联系电话', field: 'phone', editable: {
                type: 'text',
                validate: function (v) {
                    if(v.length<6) return '请输入正确联系电话';
                }
            }},
            {title: '备注', field: 'remark'},
            {title: '状态', field: 'status', formatter: function(value, row, index){
                    if (value == 1)
                        return '<span class="badge badge-success">启用</span>'
                    else
                        return '<span class="badge badge-grey">禁用</span>'
                }},
            {title: '最后修改时间', field: 'updated_at'},
            {title: '操作', cellStyle: {
                    css: {'max-width': '240px'},
                },class: 'actions', formatter: function(value, row, index) {
                    var html = '';
                    if (row.status==1) {
                        html += '<a action="disable">禁用</a>'
                    } else {
                        html += '<a action="enable">启用</a>'
                    }
                    html += '<a action="remove">删除</a>';
                    return html;
                }}
        ]
        tableContainer.bootstrapTable({
            url: urls.index,
            uniqueId: "id",
            striped: true,
            toolbar: '#toolbar',
            pagination: true,
            sidePagination: "server",
            pageSize: 20,
            pageList: [10, 20, 50, 100],
            columns: columns,
            queryParams: function (params){
                return $.extend({}, params, ace.form.serialize(tableSearchForm))
            },
            onEditableSave: function (field, row, index, oldValue, ele) {
                ace.helper.tableEdit(field, row, index, oldValue, ele, urls.edit, tableContainer)
            },
        });
    }
</script>
<?php $this->endBlock() ?>
